<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="mytag" uri="/WEB-INF/tag/tag.tld" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <link rel="stylesheet" href="/ncpsy/static/css/style.css">
    <title>农产品详情</title>

    <style>
        .raw-text-container {
            /*margin: 10px 0;*/
            text-align: left;
            color: #333;
        }

        .layui-row {
            margin-top: 30px;
        }

        .test-test {
            padding: 10px 0;
        }

        .test-test > pre {
            outline: 1px solid #ccc;
            background: #f8f8f8;
            padding: 20px;
        }

        h2 {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="page-header">
        <h1 class="title"><i class="back2NCPList"><</i> 农产品详情</h1>
    </div>
    <div class="table-container">
        <div class="table-content">
            <div class="table-card-body">
                <div class="layui-row renderNCPInfo">
                    <div class="ncp-normal-info">基本信息</div>
                    <!--在这里渲染农产品的基本信息-->
                </div>
                <div class="layui-row">
                    <div class="ncp-normal-info">溯源环节</div>
                    <div class="renderNCPHuanJieInfo">
                        <!--在这里渲染农产品的基本信息-->
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<%--<script src="/ncpsy/static/js/public.js"></script>--%>

<script>
    // 将UTC时间转换成北京时间
    function utc2beijing(utc_datetime) {
        // 处理成为时间戳
        timestamp = new Date(Date.parse(utc_datetime));
        timestamp = timestamp.getTime();
        timestamp = timestamp / 1000;

        // 增加8个小时，北京时间比utc时间多八个时区
        var timestamp = timestamp + 8 * 60 * 60;

        // 时间戳转为时间
        var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString();
        return beijing_datetime; // 2017-03-31 16:02:06
    }


    function getParamsFromUrl() {
        const paramsObj = {};
        let params = location.search.split('?');
        for (let i = 0, len = params.length; i < len; i++) {
            if (!params[i]) {
                continue
            }
            const temp = params[i].split('=');
            paramsObj[temp[0]] = temp[1]
        }
        return paramsObj
    }

</script>

<script>
    const BASE_URL = '/ncpsy';
    let layer;
    layui.use('layer', function () {
        layer = layui.layer
    });

    $(document).ready(function () {
        const $renderNCPInfo = $('.renderNCPInfo');
        //getParamsFromUrl().ncpid
        console.log('${ncpid}')
        getNcpDetail('${ncpid}').then(data => {

            if (data) {
                renderData(data);
                const nodeList = data.tp && data.tp.nodeList;
                renderNCPHuanJieInfo(nodeList);
            } else {
                layer.msg('未查到该数据');
                history.go(-1)
            }
        }).catch(err => {
            console.log(err)
        });


        $('.back2NCPList').on('click', function () {
            history.go(-1)
        })
    });

    // 根据农产品批次号查询模板信息
    function getNcpDetail(nId) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: BASE_URL + '/queryNcpByid/' + nId,
                type: 'get',
                contentType: 'application/json;charset=utf-8;',
                success: function (res) {
                    if (res.code === 200) {
                        //添加溯源记录
                        sendSyly(nId, res.data.qyid);
                        resolve(res.data);
                    } else {
                        reject(res)
                    }
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }

    function renderData(data) {
        const listName = {
            ncpmc: '农产品名称',
            cd: '产地',
            pz: '品种',
            zzfs: '种植方式',
            ccrq: '出厂日期',
            hashTwo: '农产品链上hash',
        };
        for (let prop in listName) {
            if (prop !== 'huanjie') {
                $('.renderNCPInfo').append($(`
            <div class="layui-col-ncp layui-col-xs12 layui-col-sm6 layui-col-md4">
              <span class="name-title">` + listName[prop] + `：</span>
              <span class="name-value">` + data[prop] + `</span>
            </div>`))
            }
        }
    }

    // 查看————获取模板环节信息并渲染到页面
    function renderNCPHuanJieInfo(data) {
        // 先清空元素内容，再渲染
        const $renderNCPHuanJieInfo = $('.renderNCPHuanJieInfo');
        $renderNCPHuanJieInfo.empty();
        for (let i = 0, len = data.length; i < len; i++) {
            const className = data[i].state ? 'active' : 'noActive';
            const $el = `<li class="layui-timeline-item ` + className + `">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">` + data[i].lname + `</h3>
              <p>
                环节描述：` + data[i].nexplain + `
              </p>
                <p>
                节点链上Hash：` + data[i].hash + `
              </p>
            </div>
          </li>`;
            $renderNCPHuanJieInfo.append($el)
        }
    }


    //发送ajax请求到溯源来源handle
    function sendSyly(ncpid, qyid) {
        var data = {
            syncpid: ncpid,
            syqyid: qyid
        }
        console.log(data);
        $.ajax({
            url: "/ncpsy/handle/source/count",
            type: "post",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(data),
            dataType: "json",
            timeout: 20000,
            success: function (response) {
                console.log(response);
            },
            error: function (response) {
                console.log(response);
            }
        })
    }
</script>
</body>
</html>
